Web frontend での code 分割
前提として native application と同等の或いはより優れた體驗を Web application として實現しませう、と云ふ話が有る
分割に依って何が達成されるか
LCP (Largest Contentful Paint) を改善するのが目的
古の技術。gateway server を立て、client へはその時々に必要な data 丈送ってゐた
HDML (Handheld Device Markup Language)、WML (Wireless Markup Language)
cHTML (Compact HTML)、XHTML/MP (XHTML Mobile Profile) の時代です
未だ bundling しない時代
Opera Mini
分割の單位。何を分割するか
route-based code splitting
頁單位
component-based code splitting
component單位
application-based code splitting
或いは WebWorker
critical assets を分ける
user が頁を開いた時に畫面內に見える範圍の主な內容を描畫する爲に必要な asset
critical assets 丈でも確實に cache に載せたい所
CSS
CSS in JS
styled component
CSS Module
rel="preload"
だうやって分割するか
頑張って分割する
Entry Points : Manually split code using entry configuration.
Prevent Duplication : Use the SplitChunksPlugin to dedupe and split chunks.
Dynamic Imports : Split code via inline function calls within modules.
CSS in JS
素朴に書いておいて load に失敗すると頁全體が眞っ白に成るから error boundary で圍っとけよ、とかも書いてある
SSR (Server-Side Rendering) に 2020/9/15 では lazy と Suspence は使へない。替りに loadable-components を使ふ 分割された ECMAScriptECMAScript.icon / CSS / HTML をだうやって讀み込むか script 要素や link 要素を DOM に追加する
dynamic import
await import('〜.js');
CSS の@importは blocking なので end user 環境では使ふな
@importは事前 bundling するのに使ふ
preload / prefetch
ServiceWorker
<link rel="preload"/>
HTTP/2 server push、HTTP/3 server push
link や script を正しい順番で書く。正しい順番で書かないとそもそも bug りますよね
HTTP/2 priority、HTTP/3 priority
保證されるアレではないよ (確か)
讀み込む時に Web browser の動きを出來るだけ停めない
<script async>、<script defer>
async 屬性っていつ使ふん…
prefetch する (前記)
Web browser のやり直しを減らす